<template>
    <div>
        <div class="header clear">
            <div class="title fl" v-on:click.prevent="show">
                <a href="javascript:;"><i class="icon iconfont icon-fold"></i></a>
                <span>{{title}}</span>
            </div>
            <div class="position fr" @click="hide">
                <a href="javascript:;">
                    <span>深圳</span>
                    <i class="icon iconfont icon-xiajiantou"></i>
                </a>
                <a href="#" class="person">
                    <i class="icon iconfont icon-wode"></i>
                </a>
            </div>
        </div>
        <div class="back">            
            <LeftColumn id="column"></LeftColumn>
            <div class="right" @click="hide"></div>
        </div>

        <div class="forward" @click="backTop">
            <i class="icon iconfont icon-top"></i>
        </div>
    </div>
</template>

<script>
    import LeftColumn from './LeftColumn.vue';
    import $ from 'jquery';
    export default{
        data:function(){
           return{
                isShow:true
           }
        },
        props:['title'],
        components:{
            LeftColumn
        },
        methods:{
            show:function(){
                var self=this;
                if($('#column').width()==0){
                    self.isShow=true;
                     isTrue();
                }else{
                    isTrue();
                }
               function isTrue(){
                    if(self.isShow){
                        $('.back').css('background', 'rgba(0,0,0,0.5)').animate({width:'100%'},0);
                        $('#column').animate({width:'70%'},300);
                        self.isShow=!self.isShow;                    
                    }else{
                        $('.back').css('background', 'rgba(0,0,0,0)').animate({width:0},300);
                        $('#column').animate({width:0},300);
                        self.isShow=!self.isShow;
                    }
               }               
            },
            hide:function(){
                var self=this;
                if(self.isShow==false){
                    $('.back').css('background', 'rgba(0,0,0,0)').animate({width:0},300);
                    $('#column').animate({width:0},300);
                    self.isShow=!self.isShow;
                }
            },
            forward:function(){
                $(window).scroll(function(){
                    if($(window).scrollTop()>180){
                        $('.forward').css({'transition':'all 0.3s linear','top':'90%'});
                    }else{
                        $('.forward').css({'transition':'all 0.3s linear','top':'100%'});
                    }
                })
            },
            backTop:function(){
                $('body').animate({scrollTop:0});
            }
        },
        mounted:function(){
            this.forward();
        }
    }
</script>


<style scoped>    
    .back{
        position: fixed;
        top: 0.5rem;
        right: 0;
        bottom: 0;
        left:0;
        z-index:9999;
        width:0;
        overflow:hidden;
    }
    #column{
        width:0;
        overflow:hidden;
    }
    .back .right{
        background: rgba(0,0,0,0.5);
        width:30%;
        height:100%;
        float:right;
        opacity:0;
    }
    .forward{
        background-color: rgba(0,0,0,0.7);
        width: 0.48rem;
        height: 0.48rem;
        line-height: 0.48rem;
        color: #fff;
        text-align: center;
        border-radius: 50%;
        overflow: hidden;
        cursor: pointer;
        position:fixed;
        right:3%;
        top:100%;
        z-index:9999;
    }
    .forward i{
        font-size:0.28rem;
    }
</style>